<template>
  <main>
    <font>猜你喜欢</font>
    <div class="paixu">
        <li>综合排序</li>
        <li class="nearest" @click="near()">距离最近</li>
        <li class="highest" @click="high()">销量最高</li>
        <li>筛选</li>
    </div>
    <div class="remai">
        <li>年货节热卖</li>
        <li>津贴联盟</li>
        <li>满减优惠</li>
        <li>品质联盟</li>
    </div>
    <div class="town">
    <div class="list" v-for="(item, index) in list || tankList2 ? list || tankList2 : tankList" :key="index">
        <div class="left">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="right">
            <p>{{item.name}}</p>
            <div class="kilo">
                <span>{{item.monthSalesTip}}</span>
            <span>{{item.distance}}</span>
            </div>
        </div>
    </div>
    </div>
  </main>
</template>
<script>
import { shop_list } from "../api/index";
export default {
  data(){
     return {
      list:null,
      tankList:null,
      tankList2:null,
     }
  },
  mounted() {
    shop_list({}).then((res) => {
      this.tankList = res.data.list;
    });
  },
  methods:{
    near(){
       for (var j = 0; j < this.tankList.length - 1; j++) {
        for (var i = 0; i < this.tankList.length - j - 1; i++) {
          if (
            parseFloat(this.tankList[i].distance) >
            parseFloat(this.tankList[i + 1].distance)
          ) {
            var temp = this.tankList[i];
            this.tankList[i] = this.tankList[i + 1];
            this.tankList[i + 1] = temp;
          }
        }
      }
      this.tankList2 = null;
      this.list = this.tankList;
    },
    high(){
      for (var j = 0; j < this.tankList.length - 1; j++) {
        for (var i = 0; i < this.tankList.length - j - 1; i++) {
          if (
            parseFloat(this.tankList[i].monthSalesTip.slice(2)) <
            parseFloat(this.tankList[i + 1].monthSalesTip.slice(2))
          ) {
            var temp = this.tankList[i];
            this.tankList[i] = this.tankList[i + 1];
            this.tankList[i + 1] = temp;
          }
        }
      }
      this.list = null;
      this.tankList2 = this.tanklist;
    }
  }
}
</script>

<style scoped>
   main{
    height: 230px;
    width: 100%;
   }
   main font{
    height: 25px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
   }
   main .paixu{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    list-style: none;
   }
   main .paixu li{
    height: 100%;
    width: 25%;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    font-weight: 700;
   }
   main .remai{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    list-style: none;
   }
   main .remai li{
    height: 100%;
    width: 25%;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    background-color: rgba(202, 191, 177, 0.578);
   }
   .town{
    height: 145px;
    width: 100%;
    overflow: auto;
   }
   main .list{
    width: 100%;
    height: 75px;
    display: flex;
    border-bottom: 1px solid rgb(224, 211, 211);
   }
   main .left{
    width: 80px;
    height: 100%;
    text-align: center;
   }
   main .left img{
    width: 70%;
    padding-top: 10px;
   }
   .right{
    width: 180px;
   }
   .right p{
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
   }
   .kilo{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
   }
   .kilo span{
    font-size: 12px;
    color: red;
   }
  .kilo span:nth-child(2){
    margin-right: 10px;
  }
</style>